

<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <el-form-item label="时间">
        <input type="date" v-model="listQuery.start">
      </el-form-item>
      <el-form-item>
        <el-button
        round size="medium"
          class="filter-item"
          :style="{background:buttonColor.edit,color:buttonColor.color}"
          @click="handleFilter"
          >查找</el-button>
      </el-form-item>
    </el-form>

    <!-- 查询结果 -->
    <el-table
      :height="buttonColor.clientHeight"
      v-loading="listLoading"
      :data="list"
      :header-cell-style="tableColor"
      stripe
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        :width="buttonColor.line"
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column align="left" label="订单编号" prop="orderId" />
      <el-table-column align="left" label="会议室" prop="pointName" />
      <el-table-column align="left" label="预约开始结束时间" prop="time" />
      <el-table-column align="left" label="用电量（kWh）" prop="roomPower" />
      <el-table-column align="left" label="单价（度）" >
        <template slot-scope="scope">
          <div >1元/度</div>
          
        </template>
      </el-table-column>
      <el-table-column align="left" label="总金额（元）" prop="roomPower" />
      <el-table-column align="left" label="订单状态" >
        <template slot-scope="scope">
          <div v-if="scope.row.status==1">待付款</div>
          <div v-if="scope.row.status==2">已完成</div>
          <div v-if="scope.row.status==3">已取消</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="支付方式" >
        <template slot-scope="scope">
          <div v-if="scope.row.status==1">未支付</div>
          <div v-if="scope.row.status==2">微信支付</div>
          <div v-if="scope.row.status==3">支付宝支付</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="创建时间" prop="creattime">

        </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}
.el-button + .el-button {
  margin-left: 1px;
}
</style>

<script>
import {
  listequipmentClass,
  createequipmentClass,
  updateequipmentClass,
  deleteequipmentClass,
} from "@/api/equipmentClass";
import { getListArea } from '@/api/area'
import Pagination from "@/components/Pagination";
import moment from "moment";
import { tableColor,titleColor,buttonColor } from "@/filters/index";
import { meetingOrderuserlist } from "@/api/meetingManage";
export default {
  name: "OrderInfo",
  components: { Pagination },
  data() {
    return {
      buttonColor:buttonColor,
      getFparentno:null,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        end: undefined,
        start: undefined,
        
      },
      dataForm: {
        fclassstno: undefined,
        fclassstname: undefined,
        fparentno: undefined,
        fclassstyle: undefined,
        flevel: undefined,
        fdiscmonth: undefined,
        fupddate: undefined,
        foperator: undefined,
        id: undefined,
      },
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      tableColor: tableColor,
      titleColor: titleColor,
    };
  },
  created() {
    getListArea({flag:2})
      .then(response => {
        this.getFparentno = response.data.data.list
      })
      .catch(() => {
        this.getFparentno = []
      })
    this.getList();
  },
  methods: {
    // 回显
    formatFparentno: function(row, column) {
      if(this.getFparentno){
        for (let i = 0; i < this.getFparentno.length; i++) {
        if (row.fparentno === this.getFparentno[i].value) {
          return this.getFparentno[i].label
        }
      }
      }else{
      return ''
      }
    },
    // 日期 回显
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    // 获取列表数据
    getList() {
      this.listLoading = true;
      console.log(this.listQuery);
      if(this.listQuery.start==undefined){
        listQuery = {}
        listQuery.page= 1
        listQuery.limit= 20
        listQuery.end= new Date()
        listQuery.start= new Date()
      }
      var listQuery = JSON.parse(JSON.stringify(this.listQuery));
      listQuery.start = moment(listQuery.start).format("YYYY-MM-DD");
      listQuery.start = moment(listQuery.start).format("YYYY-MM-DD HH:mm:ss");
      listQuery.end = new Date(listQuery.start).getTime()+(1000*60*60*24);
      this.listQuery.start = moment(listQuery.start).format("YYYY-MM-DD");
      this.listQuery.end = moment(listQuery.end).format("YYYY-MM-DD");
      listQuery.end = new Date(moment(listQuery.end).format("YYYY-MM-DD HH:mm:ss")).getTime();
      listQuery.start = new Date(moment(listQuery.start).format("YYYY-MM-DD HH:mm:ss")).getTime();
      console.log("listQuery");
      console.log(listQuery);
      meetingOrderuserlist(listQuery)
        .then((response) => {
          console.log(response.data.data.list)
          var responselist = JSON.parse(JSON.stringify(response.data.data.list))
          for(var i in responselist){
            responselist[i].time = moment(responselist[i].meetingStartTime).format("YYYY-MM-DD HH:mm:ss") +"~"+ moment(responselist[i].meetingEndTime).format("HH:mm:ss")
            responselist[i].creattime = moment(responselist[i].orderCreatedTime).format("YYYY-MM-DD HH:mm:ss")
          }
          this.list = responselist;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    // 查找
    handleFilter() {
      this.listQuery.page = 1;
      if(this.listQuery.start==undefined){
        this.$notify.error({
              title: "失败",
              message: '请选择日期',
            });
            return;
      }
      this.getList();
    },
    // 表单重置
    resetForm() {
      this.dataForm = {
        fclassstno: undefined,
        fclassstname: undefined,
        fparentno: undefined,
        fclassstyle: undefined,
        flevel: undefined,
        fdiscmonth: undefined,
        fupddate: undefined,
        foperator: undefined,
        id: undefined,
      };
    },
    
    // 删除
    handleDelete(row) {
      this.$confirm("是否要删除设备分类", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteequipmentClass(row)
          .then((response) => {
            this.$notify.success({
              title: "成功",
              message: "删除设备分类成功",
            });
            const index = this.list.indexOf(row);
            this.list.splice(index, 1);
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response,
            });
          });
      });
    },
    // 序号
    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>
